<template>
	<view class="device-cell" :class="{'paddingTop14': time.length, 'paddingRight14': btnShape === 'circle'}">
		<view class="header">
			<template v-if="time">
				<text class="time">申请时间：{{ time }}</text>
			</template>

		</view>
		<view class="body">
			<view class="item-left">
				<u--image width="264rpx" height="166rpx" :src="image" mode="" :shape="imgShape" :radius="imgRadius">
				</u--image>
			</view>
			<view class="item-right">
				<view class="item-title">{{title}}</view>
				<slot class="item-info">
				</slot>
			</view>
		</view>
		<view class="item-btn button-mini">
			<u-button size="mini" :type="btnType" :color="btnColor" :shape="btnShape" :text="btnText" @click="click">
			</u-button>
		</view>
		<view class="clear">
		</view>
		<text v-if="badgeType !== -1" class="badgeBox" :class="getBadgeStyle">{{ badgeText[badgeType] }}</text>
	</view>
</template>

<script>
	export default {
		name: "DeviceCell",
		props: {
			image: {
				type: String,
				default: "/static/demo.jpg"
			},
			title: {
				type: String,
			},
			btnText: {
				type: String,
				default: "确定"
			},
			btnType: {
				type: String
			},
			btnColor: {
				type: String
			},
			time: {
				type: String,
				default: ''
			},
			btnShape: {
				type: String,
				default: 'square'
			},
			imgShape: {
				type: String,
				default: 'square'
			},
			imgRadius: {
				type: String | Number,
				default: 0
			},
			badgeType: {
				// 0：已通过 1：审核中 2：已驳回 3：使用中 4：作废
				type: Number,
				default: -1
			}
		},
		data() {
			return {
				badgeText: ['已通过','审核中','已驳回','使用中','作废']
			};
		},
		computed: {
			getBadgeStyle() {
				if (this.badgeType === 0) {
					return 'badgeBox_success'
				} else if (this.badgeType === 1) {
					return 'badgeBox_warning'
				} else if (this.badgeType === 2) {
					return 'badgeBox_danger'
				} else if (this.badgeType === 3) {
					return 'badgeBox_primary'
				} else if (!this.badgeType || this.badgeType === 'default') {
					return 'badgeBox_default'
				}
			}
		},
		methods: {
			click() {
				this.$emit('click')
			}
		}
	}
</script>

<style lang="scss">
	.device-cell {
		position: relative;
		mini-height: 232rpx;
		background-color: #fff;
		border-radius: 24rpx;
		margin-bottom: 20rpx;
		// padding: 34rpx 16rpx 20rpx;
		padding: 34rpx 16rpx 20rpx 16rpx;
		box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(20, 33, 66, 0.08);

		.header {
			.time {
				display: inline-block;
				color: #666666;
				font-size: 24rpx;
				margin-top: -14rpx;
				margin-bottom: 28rpx;

				&:last-child {
					margin-left: 14rpx;
				}
			}
		}

		.body {
			display: flex;
			position: relative;

			.item-left {
				width: 264rpx;
				height: 166rpx;
			}

			.item-right {

				width: 100%;
				height: 100%;
				margin-left: 32rpx;

				.item-title {
					font-size: 16px;
				}

				.item-info {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					font-size: 12px;
					color: #666666;
					margin-top: 20rpx;
				}
			}
		}

		.item-btn {
			float: right;
			height: 26px;
			width: 65px;
		}

		.badgeBox {
			position: absolute;
			top: 0;
			right: 0;
			display: inline-block;
			height: 44rpx;
			padding: 6rpx 12rpx;
			color: #fff;
			font-size: 14px;
			border-radius: 0px 24rpx 0px 24rpx;
		}

		.badgeBox_default {
			background-color: #C0C4CC;
		}

		.badgeBox_primary {
			background-color: #6BA5FE;
		}

		.badgeBox_success {
			background-color: #53BA44;
		}

		.badgeBox_warning {
			background-color: #F4883F;
		}

		.badgeBox_danger {
			background-color: #E43333;
		}
	}

	.paddingTop14 {
		padding-top: 20rpx;
	}

	.paddingRight14 {
		padding-right: 36rpx;
	}

	.clear {
		clear: both;
	}
</style>
